<template>
    <div class="index-container">
        <v-breadcrumb :breadcrumbData="[{name: '我的'}, {name: '修改个人资料'}]"></v-breadcrumb>

        <div class="g-box" v-if="userinfo">
            <div class="table">
                <table class="width100 vd-table">
                    <tbody>
                    <tr v-if="userinfo.user_role_id!=1">
                        <td>用户角色</td>
                        <td>
                            <el-input class="width-400" disabled :value="userinfo.user_role_name"></el-input>
                        </td>
                    </tr>
                    <tr v-if="userinfo.user_role_id==1">
                        <td>系统角色</td>
                        <td>
                            <el-input class="width-400" disabled :value="userinfo.manage_role_name"></el-input>
                        </td>
                    </tr>
                    <tr>
                        <td style="width:200px">账号</td>
                        <td>
                            <el-input placeholder="请输入" disabled class="width-400"
                                      v-model="userinfo.username"></el-input>
                        </td>
                    </tr>
                    <tr v-if="userinfo.parent_agent_user_id">
                        <td>所属代理</td>
                        <td>
                            <el-input class="width-400" disabled :value="userinfo.parent_agent_nickname"></el-input>
                        </td>
                    </tr>
                    <tr v-if="userinfo.parent_group_user_id">
                        <td>所属团长</td>
                        <td>
                            <el-input disabled class="width-400" :value="userinfo.parent_group_nickname"></el-input>
                        </td>
                    </tr>
                    <tr>
                        <td>{{userinfo.user_role_id==3?'商家名':'昵称'}}</td>
                        <td>
                            <el-input placeholder="请输入" class="width-400" v-model="userinfo.nickname"></el-input>
                            <span class="ml-5 color-666">用于对外显示</span>
                        </td>
                    </tr>
                    <tr>
                        <td>头像</td>
                        <td>
                            <v-upload-image :fromData="userinfo.image" @toData="uploadBannerImage"></v-upload-image>
                        </td>
                    </tr>
                    <tr>
                        <td>QQ</td>
                        <td>
                            <el-input placeholder="请输入" class="width-400" v-model="userinfo.qq"></el-input>
                        </td>
                    </tr>
                    <tr>
                        <td>邮件</td>
                        <td>
                            <el-input placeholder="请输入" class="width-400" v-model="userinfo.email"></el-input>
                        </td>
                    </tr>
                    <tr>
                        <td>提现支付宝的姓名</td>
                        <td>
                            <el-input placeholder="请输入提现支付宝的姓名" class="width-400"
                                      v-model="userinfo.alipay_name"></el-input>
                        </td>
                    </tr>
                    <tr>
                        <td>提现支付宝的账号</td>
                        <td>
                            <el-input placeholder="请输入提现支付宝的账号" class="width-400"
                                      v-model="userinfo.alipay_account"></el-input>
                        </td>
                    </tr>
                    <tr v-if="userinfo.user_role_id==5">
                        <td>真实姓名</td>
                        <td>
                            <el-input placeholder="请输入真实姓名（用于审核，不对外公开）" class="width-400"
                                      v-model="userinfo.real_name"></el-input>
                        </td>
                    </tr>
                    <tr v-if="userinfo.user_role_id==5">
                        <td>身份证号码</td>
                        <td>
                            <el-input placeholder="请输入身份证号码（用于审核，不对外公开）" class="width-400"
                                      v-model="userinfo.identity_number"></el-input>
                        </td>
                    </tr>
                    <tr v-if="userinfo.user_role_id==5">
                        <td>身份证正面照</td>
                        <td>
                            <div class="flex-center flex-start">
                                <div>
                                    <v-upload-image :fromData="userinfo.identity_image"
                                                    @toData="uploadIdentityImage"></v-upload-image>
                                </div>
                                <span class="ml-5">用于审核不对外公开，请写上“认证使用，复印无效”。</span>
                            </div>
                        </td>
                    </tr>
                    <tr>
                        <td>状态</td>
                        <td>
                            <el-select v-model="userinfo.status" class="width-400" disabled>
                                <el-option label="正常" :value="1"></el-option>
                                <el-option label="未审核" :value="2"></el-option>
                                <el-option label="修改资料待审核" :value="3"></el-option>
                                <el-option label="禁止登录" :value="4"></el-option>
                            </el-select>
                        </td>
                    </tr>
                    <tr>
                        <td></td>
                        <td>
                            <el-button v-preventDbClick @click="submit" type="primary" class="width-200">提交
                            </el-button>
                        </td>
                    </tr>
                    </tbody>
                </table>
            </div>
        </div>

    </div>
</template>

<script type="text/ecmascript-6">
import request from '../../common/js/request.js';
import {tool} from "../../common/js/tool.js";
import config from '../../common/js/config.js'

export default {
    data() {
        return {
            userinfo: '',
        };
    },

    computed: {},

    mounted() {
    },

    created() {
        this.getData();
    },

    methods: {
        uploadBannerImage(a) {
            this.userinfo.image = a;
        },
        uploadIdentityImage(a) {
            this.userinfo.identity_image = a;
        },

        getData() {
            request({
                url: '/user/myUserinfo/userinfo',
            }).then((res) => {
                this.userinfo = res.data;
            })
        },

        submit() {
            request({
                url: '/user/myUserinfo/edit',
                data: this.userinfo
            }).then((res) => {
                tool.message(res.msg);
            })
        },

    },

};
</script>

<style lang="less" rel="stylesheet/less" scoped>
@import url("../../common/css/variable.less");
</style>
